<!--
 * @Description:
 * @Autor: zhangqj
 * @Date: 2021-01-20 17:00:47
 * @LastEditors: xinsang
 * @LastEditTime: 2021-03-31 16:15:47
-->
<template>
  <div>
    <div class="plat-title-container">
      <TimeTabs
        :tabindex="tabindex"
        :time-list="timeList"
        :active-color="bgColor"
        class="plat-timeTabs"
        style=""
        @tabClick="tabClick"
      />
      <PlatTabs
        :plat-index="platIndex"
        :plat-list="platList"
        @platClick="platClick"
      />
    </div>
    <div v-loading="loading" class="data-show">
      <div class="flex">
        <div class="data-left flex-justify">
          <div class="data-left-show">
            <span class="data-title">开播人数</span>
            <div class="data-content">
              <p>
                <span v-if="platformData.anchorCount > 1000000" class="data-bold">{{
                  platformData.anchorCount | f_number(2)
                }}</span>
                <span v-else class="data-bold">{{
                  platformData.anchorCount | thousands
                }}</span>
                <span> 人</span>
              </p>
              <div
                class="data-limit"
                :class="upDownTitle(platformData.anchorCountSequential)"
              >
                <span
                  :class="upDownIcon(platformData.anchorCountSequential)"
                />{{
                  platformData.anchorCountSequential | showNumber | f_number(2)
                }}%
              </div>
            </div>
          </div>
          <div class="data-left-show">
            <span class="data-title">开播场次</span>
            <div class="data-content">
              <p>
                <span v-if="platformData.liveCount > 1000000" class="data-bold">{{
                  platformData.liveCount | f_number(2)
                }}</span>
                <span v-else class="data-bold">{{
                  platformData.liveCount | thousands
                }}</span>
                <span> 场</span>
              </p>
              <div
                class="data-limit"
                :class="upDownTitle(platformData.liveCountSequential)"
              >
                <span
                  :class="upDownIcon(platformData.liveCountSequential)"
                />{{
                  platformData.liveCountSequential | showNumber | f_number(2)
                }}%
              </div>
            </div>
          </div>
          <div class="data-left-show">
            <span class="data-title">开播商品数量</span>
            <div class="data-content">
              <p>
                <span v-if="platformData.goodsCount > 1000000" class="data-bold">{{
                  platformData.goodsCount| f_number(2)
                }}</span>
                <span v-else class="data-bold">{{
                  platformData.goodsCount | thousands
                }}</span>
                <span> 件</span>
              </p>
              <div
                class="data-limit"
                :class="upDownTitle(platformData.goodsCountSequential)"
              >
                <span
                  :class="upDownIcon(platformData.goodsCountSequential)"
                />{{
                  platformData.goodsCountSequential | showNumber | f_number(2)
                }}%
              </div>
            </div>
          </div>
          <div class="data-left-show">
            <span class="data-title">平均客单价</span>
            <div class="data-content">
              <p>
                <span class="data-bold">{{
                  platformData.avgPrice | f_number(2, { fen: true })
                }}</span>
                <span> 元</span>
              </p>
              <div
                class="data-limit"
                :class="upDownTitle(platformData.avgPriceSequential)"
              >
                <span
                  :class="upDownIcon(platformData.avgPriceSequential)"
                />{{
                  platformData.avgPriceSequential | showNumber | f_number(2)
                }}%
              </div>
            </div>
          </div>
        </div>
        <DataLine
          :x-axisdata="fansAddList.time"
          :seriesdata="fansAddList.gmv"
          :series2data="fansAddList.pv"
          :time-tab="timeTab"
          class="line-fans"
        />
      </div>
      <div class="flex flex-wrap mt-20">
        <div class="data-box1 data-box">
          <div>
            <span class="img-icon1 img-icon" />
            <span class="title-color">PV</span>
          </div>
          <div class="detail-data">
            <span class="bold-size">{{ platformData.pv | f_number(2) }}</span>
            <span
              class="line-end"
              :class="upDownTitle(platformData.pvSequential)"
            >
              <span
                style="margin-right: 6px"
                :class="upDownIcon(platformData.pvSequential)"
              />{{ platformData.pvSequential | showNumber | f_number(2) }}%
            </span>
          </div>
        </div>
        <div class="data-box2 data-box">
          <div>
            <span class="img-icon2 img-icon" />
            <span class="title-color">UV</span>
          </div>
          <div class="detail-data">
            <span class="bold-size">{{ platformData.uv | f_number(2) }}</span>
            <span
              class="line-end"
              :class="upDownTitle(platformData.uvSequential)"
            >
              <span
                style="margin-right: 6px"
                :class="upDownIcon(platformData.uvSequential)"
              />{{ platformData.uvSequential | showNumber | f_number(2) }}%
            </span>
          </div>
        </div>
        <div class="data-box3 data-box">
          <div>
            <span class="img-icon3 img-icon" />
            <span class="title-color">预估销量</span>
          </div>
          <div class="detail-data">
            <span class="bold-size">{{
              platformData.saleAmount | f_number(2)
            }}</span>
            <span
              class="line-end"
              :class="upDownTitle(platformData.saleAmountSequential)"
            >
              <span
                style="margin-right: 6px"
                :class="upDownIcon(platformData.saleAmountSequential)"
              />{{
                platformData.saleAmountSequential | showNumber | f_number(2)
              }}%
            </span>
          </div>
        </div>
        <div class="data-box4 data-box">
          <div>
            <span class="img-icon4 img-icon" />
            <span class="title-color">预估销售额</span>
          </div>
          <div class="detail-data">
            <span class="bold-size">{{
              platformData.saleVolume | f_number(2, { fen: true })
            }}</span>
            <span
              class="line-end"
              :class="upDownTitle(platformData.saleVolumeSequential)"
            >
              <span
                style="margin-right: 6px"
                :class="upDownIcon(platformData.saleVolumeSequential)"
              />{{
                platformData.saleVolumeSequential | showNumber | f_number(2)
              }}%
            </span>
          </div>
        </div>
        <div class="data-box5 data-box">
          <div>
            <span class="img-icon5 img-icon" />
            <span class="title-color">已收录主播</span>
          </div>
          <div class="detail-data">
            <span class="bold-size">{{
              platformData.includeAnchorCount | thousands
            }}</span>
            <span
              class="line-end"
              :class="upDownTitle(platformData.includeAnchorCountSequential)"
            >
              <span
                style="margin-right: 6px"
                :class="upDownIcon(platformData.includeAnchorCountSequential)"
              />{{
                platformData.includeAnchorCountSequential
                  | showNumber
                  | f_number(2)
              }}%
            </span>
          </div>
        </div>
        <div class="data-box6 data-box">
          <div>
            <span class="img-icon6 img-icon" />
            <span class="title-color">热销品类</span>
          </div>
          <div class="new-data">
            <span>{{ platformData.hotCategory }}</span>
          </div>
        </div>
        <div class="data-box7 data-box">
          <div>
            <span class="img-icon7 img-icon" />
            <span class="title-color">热销店铺</span>
          </div>
          <div class="new-shop">
            <span>{{ platformData.hotShop }}</span>
          </div>
        </div>
        <div class="data-box8 data-box flex">
          <div class="canvas-left">
            <div class="cricle">
              <canvas
                id="one"
                ref="canvasWomen"
                width="50"
                height="50"
              />
              <div class="sex1" />
            </div>
            <span class="title">女性 {{ sex[0].women }}%</span>
          </div>
          <div class="canvas-right">
            <div class="cricle">
              <canvas id="two" ref="canvasMan" width="50" height="50" />
              <div class="sex2" />
            </div>
            <span class="title">男性 {{ sex[0].man }}%</span>
          </div>
          <div class="leftbg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PlatTabs from './PlatTabs'
import TimeTabs from './TimeTabs'
import DataLine from './DataLine'
import DrawCircle from './drawCircle'
export default {
  components: {
    PlatTabs,
    DataLine,
    TimeTabs
  },
  filters: {
    showNumber(val) {
      if (val < 0) {
        return val.split('-')[1] * 100
      } else {
        return val * 100
      }
    }
  },
  data() {
    return {
      showCanvas: false,
      tabindex: 4,
      timeTab: 30,
      platIndex: 0,
      loading: false,
      bgColor: '#FF0929',
      timeList: [
        { label: '昨日', value: 1 },
        { label: '3天', value: 3 },
        { label: '7天', value: 7 },
        { label: '15天', value: 15 },
        { label: '30天', value: 30 }
        // { label: '60天', value: 60 }
      ],
      platList: [
        { label: '淘宝', value: 1 },
        { label: '抖音', value: 2 },
        { label: '快手', value: 11 }
      ],
      form: {
        diffDay: 30,
        platformType: 1
      },
      fansAddList: {
        time: [],
        gmv: [],
        pv: []
      },
      platformData: [],
      sex: [
        {
          women: 0,
          man: 0
        }
      ]
    }
  },
  computed: {
    // 字体颜色
    upDownTitle() {
      return function(val) {
        if (val >= 0 || !val) {
          return 'up-title'
        } else {
          return 'down-title'
        }
      }
    },
    // 标识颜色
    upDownIcon() {
      return function(val) {
        if (val >= 0 || !val) {
          return 'up-icon'
        } else {
          return 'down-icon'
        }
      }
    }
  },
  created() {
    this.getPlatformData()
  },
  methods: {
    tabClick(item, index) {
      this.tabindex = index
      this.showCanvas = false
      this.form.diffDay = item.value
      this.timeTab = item.value
      this.getPlatformData()
    },
    platClick(item, ind) {
      this.platIndex = ind
      this.showCanvas = false
      this.form.platformType = item.value
      this.getPlatformData()
    },
    getPlatformData() {
      this.loading = true
      this.$home
        .homePlatformData(this.form)
        .then(({ data }) => {
          this.platformData = data
          if (data.pvAncGmvJson && data.sexScaleJson) {
            this.fansAddList = JSON.parse(data.pvAncGmvJson)
            this.sex = JSON.parse(data.sexScaleJson)
          } else {
            this.fansAddList = []
            this.sex = [
              {
                women: 0,
                man: 0
              }
            ]
          }
        })
        .finally(() => {
          new DrawCircle().clearCanvas('one')
          new DrawCircle().clearCanvas('two')
          this.loading = false
          new DrawCircle({
            id: 'one',
            angle: this.sex[0].women / 100,
            text: '',
            color: '#FF5758'
          }).draw()
          new DrawCircle({
            id: 'two',
            angle: this.sex[0].man / 100,
            text: '',
            color: '#4A97FF'
          }).draw()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.plat-title-container {
  height: 28px;
  text-align: center;
  position: relative;
  top: -18px;
  .plat-title {
    margin: 0 auto;
    font-size: 24px;
    font-weight: 500;
  }
}
.data-show {
  height: 559px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  margin-top: 10px;
  padding: 20px 18px;
  .data-left {
    width: 224px;
    height: 315px;
    background: linear-gradient(
      319deg,
      rgba(99, 103, 225, 0.8) 0%,
      #519aff 100%,
      rgba(255, 69, 9, 0.3) 100%
    );
    border-radius: 6px;
    padding: 0 18px;
    &-show {
      height: 78px;
      padding: 14px 0;
      color: #ffffff;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      &:nth-child(1) {
        border-top: none;
      }
      .data-title {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
      .data-content {
        font-weight: 500;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
      .data-bold {
        font-size: 24px;
        font-weight: 500;
      }
      .data-limit {
        width: 60px;
        height: 18px;
        font-size: 12px;
        text-align: center;
        line-height: 18px;
        border-radius: 9px;
        background: #f2f2f2;
      }
    }
  }
  .line-fans {
    width: 950px;
    margin-left: 18px;
    height: 315px;
  }
  .data-box {
    width: 284px;
    height: 82px;
    background: #ffffff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
    border-radius: 6px;
  }
  .img-icon {
    display: inline-block;
    width: 18px;
    height: 16px;
    margin-right: 4px;
  }
  .data-box1 {
    padding: 19px 18px 17px;
    margin-right: 19px;
    background: url('../image/bz1.png') no-repeat center center;
    position: relative;
    .img-icon1 {
      background: url('../image/bz13.png') no-repeat center center;
    }
  }
  .data-box2 {
    padding: 19px 18px 17px;
    margin-right: 20px;
    background: url('../image/bz2.png') no-repeat center center;
    position: relative;
    .img-icon2 {
      background: url('../image/bz12.png') no-repeat center center;
    }
  }
  .data-box3 {
    padding: 19px 18px 17px;
    margin-right: 19px;
    background: url('../image/bz3.png') no-repeat center center;
    position: relative;
    .img-icon3 {
      background: url('../image/bz11.png') no-repeat center center;
    }
  }
  .data-box4 {
    padding: 19px 18px 17px;
    background: url('../image/bz4.png') no-repeat center center;
    position: relative;
    .img-icon4 {
      background: url('../image/bz10.png') no-repeat center center;
    }
  }
  .data-box5 {
    padding: 19px 18px 17px;
    margin: 20px 19px 0 0;
    background: url('../image/bz5.png') no-repeat center center;
    position: relative;
    .img-icon5 {
      background: url('../image/bz14.png') no-repeat center center;
    }
  }
  .data-box6 {
    padding: 19px 18px 17px;
    margin: 20px 20px 0 0;
    background: url('../image/bz6.png') no-repeat center center;
    position: relative;
    .img-icon6 {
      background: url('../image/bz9.png') no-repeat center center;
    }
    .new-data {
      margin-top: 15px;
      font-size: 14px;
      color: #ff581d;
      height: 16px;
      line-height: 16px;
    }
  }
  .data-box7 {
    padding: 19px 18px 17px;
    margin: 20px 19px 0 0;
    background: url('../image/bz7.png') no-repeat center center;
    position: relative;
    .img-icon7 {
      background: url('../image/bz8.png') no-repeat center center;
    }
    .new-shop {
      margin-top: 15px;
      font-size: 14px;
      color: #ff5c71;
      height: 16px;
      line-height: 16px;
    }
  }
  .data-box8 {
    margin-top: 20px;
    position: relative;
    .leftbg {
      width: 50px;
      height: 27px;
      background: url('../image/bz15.png') no-repeat center center;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .canvas-left {
      width: 80px;
      position: absolute;
      left: 50px;
      top: 10px;
      .cricle {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        position: relative;
        .sex1 {
          width: 14px;
          height: 16px;
          background: url('../image/woman.png') no-repeat center center;
          position: absolute;
          left: 18px;
          top: 17px;
        }
      }
    }
    .canvas-right {
      width: 80px;
      position: absolute;
      right: 50px;
      top: 10px;
      .cricle {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        position: relative;
        .sex2 {
          width: 14px;
          height: 16px;
          background: url('../image/man.png') no-repeat center center;
          position: absolute;
          left: 18px;
          top: 17px;
        }
      }
    }
    .title {
      display: inline-block;
      width: 80px;
      height: 14px;
      color: #666666;
      text-align: center;
    }
  }
  .title-color {
    display: inline-block;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    color: #333333;
    position: relative;
    top: -2px;
  }
  .detail-data {
    width: 185px;
    position: relative;
    .bold-size {
      font-size: 24px;
      color: #333333;
      font-weight: 500;
    }
    .line-end {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
.up-icon {
  display: inline-block;
  margin-right: 4px;
  height: 6px;
  width: 8px;
  background: url('../image/up.png') no-repeat center center;
  background-size: 8px 6px;
}
.up-title {
  color: #ff0929;
}
.down-icon {
  display: inline-block;
  margin-right: 4px;
  height: 6px;
  width: 8px;
  background: url('../image/down.png') no-repeat center center;
  background-size: 8px 6px;
}
.down-title {
  color: #1dd73b;
}
</style>
